import { Radio, Textarea, Field } from "@taroify/core";
import { View, Text } from "@tarojs/components";

const MainContent: React.FC = () => {
  const options = [
    {
      title1: "生产环境条件",
      title2:
        "厂区是否有扬尘、是否有积水，广区、车间是否卫生整洁。生产场所是否有虫害迹象",
      id: "1",
    },
    {
      title1: "生产环境条件",
      title2:
        "厂区是否有扬尘、是否有积水，广区、车间是否卫生整洁。生产场所是否有虫害迹象",
      id: "2",
    },
  ];

  return (
    <View>
      <View>
        {options.map((item, index) => (
          <View key={index}>
            <View className="w-full px-3 pb-3 flex flex-col">
              <View className=" text-amber-900 text-base font-semibold pb-2">
                {index + 1}.{item.title1}
              </View>
              <View className="bg-white rounded-lg p-3 ">
                <View className="pb-3">
                  {index + 1}.{item.title2}
                </View>
                <View className="pb-3">
                  <Radio.Group defaultValue="1" direction="horizontal">
                    <Radio name="1">符合</Radio>
                    <Radio name="2">不符合</Radio>
                  </Radio.Group>
                </View>
                <View>
                  <View className="flex justify-between flex-nowrap">
                    <Text className="pb-2">情况描述</Text>
                    <Text className="text-red-500">查看同行风险</Text>
                  </View>
                  <View className="w-full py-3 rounded border border-slate-300 ">
                    <Field align="start">
                      <Textarea autoHeight placeholder="请输入" />
                    </Field>
                  </View>
                </View>
                <View>
                  <View className="pb-2 pt-3">
                    <Text>备注：</Text>
                  </View>
                  <View className="w-full px-3 rounded border border-slate-300 ">
                    <Field align="start">
                      <Textarea autoHeight placeholder="请输入" />
                    </Field>
                  </View>
                </View>
              </View>
            </View>
          </View>
        ))}
      </View>
    </View>
  );
};

export default MainContent;
